<template>
    <view style="padding: 40rpx;">
        <u-search placeholder="请输入关键字" v-model="searchValue" :height="40" bgColor="#fff" borderColor="#f2f2f2"
            :animation="false" @custom="onSearch"  @search="onSearch"></u-search>
        <view>
            <view style="background-color: #F9F9F9; border-radius: 12px;padding: 30rpx;margin-top: 40rpx"
                v-for="(item, index) in practiceData" :key="item.id" @click="() => onJump(item)">
                <view style="display: flex;justify-content: space-between;">
                    <view>{{ item.subjectName }}</view>
                    <!-- <view style="display: flex;align-items: center; ">
                        <u-icon name="star" size="20" color="#37B874"></u-icon>
                        <u-icon name="star-fill" color="#FF9D00" size="20"></u-icon>
                        <text style="color: #666666; font-size: 14px;">收藏</text>
                    </view> -->
                </view>
                <view style="display: flex;margin-top: 50rpx;">
                    <view style="display: flex;align-items: center;">
                        <image src="../static/images/total.svg" style="width:40rpx;height: 40rpx;"></image>
                        <text style="color: #666666; font-size: 14px;margin-left: 10rpx;">共{{ item.itemNum }}道</text>
                    </view>
                    <!-- <view style="display: flex;align-items: center;margin-left: 30rpx;">
                        <image src="../static/images/wrongQuestion.svg" style="width:40rpx;height: 40rpx;">
                        </image>
                        <text style="color: #666666; font-size: 14px;">{{ item.collectNum }} {{ '收藏' }}</text>
                    </view> -->

                </view>
            </view>
        </view>
    </view>

</template>

<script>
import { pageItemMarket } from '../services/QuestionBankService';

export default {
    data() {
        return {
            searchValue: '',
            practiceData: [],
            queryData: {
                queryKey: '',
                pageNo: 1,
                pageSize: 10,
            },
        }
    },
    onShow() {
        this.onPageItemMarket()
    },
    watch: {
        queryData: {
            handler(newVal, oldVal) {
                this.onPageItemMarket();
            },
            deep: true // 深度监听
        }
    },
    onReachBottom() {
        console.log('触底');
        this.onPageItemMarket();
    },
    computed: {},
    methods: {
        onPageItemMarket() {
            pageItemMarket({ ...this.queryData }).then(res => {
                console.log(res)
                this.practiceData = res.datas
            })
        },
        // 搜索
        onSearch() {
            this.queryData = {
                ...this.queryData,
                queryKey: this.searchValue,
                pageNo: 1
            }
          
        },
        onUpqQueryData() {
            this.queryData = {
                ...this.queryData,
                pageSize: this.queryData.pageSize + 10
            }
        },
        onJump(item) {
            console.log(item);
            
            uni.navigateTo({
                url: '/questionBankMarket/questionDetailPage?questionItem=' + encodeURIComponent(JSON.stringify(item))
            })
        },
    },


}
</script>

<style lang="scss">
page {
    background: #ffffff !important;
}
</style>